<!-- login.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!-- 简化起见，假设有一个简单的内联样式 -->
    <style>
        form { display: flex; flex-direction: column; align-items: center; }
        input { margin-bottom: 1rem; }
    </style>
</head>
<body>
    <form id="login-form" action="LoginServlet" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>

        <!-- 假设验证码部分由JavaScript动态生成 -->
        <label for="captcha">验证码：</label>
        <input type="text" id="captcha" name="captcha" required>
        <!-- 这里省略了验证码图片 -->

        <button type="submit">登录</button>
    </form>

    <!-- JavaScript脚本用于模拟简单的验证码验证 -->
    <script>
        // 简化处理，实际项目中验证码逻辑更复杂
        function validateCaptcha() {
            // 实际项目中应从服务器获取真实验证码并与用户输入比对
            const captcha = document.getElementById('captcha');
            if (captcha.value !== '示例验证码') { // 示例验证，实际应为动态生成的验证码值
                alert('验证码错误！');
                return false;
            }
            return true;
        }

        document.getElementById('login-form').addEventListener('submit', function(event) {
            if (!validateCaptcha()) {
                event.preventDefault();
            }
        });
    </script>
</body>
</html>